import useChannelScroll from "@pages/home/common/useChannelScroll";
import styles from "@styles/channel.module.less";
import classNames from "classnames";
import useGuestChannels from "@pages/home/common/useGuestChannels";
import { useNavigate, useParams } from "react-router-dom";
import { useEffect, useRef } from "react";

export default function GuestChannel() {
  const { scrollContainerRef, scrollHandler } = useChannelScroll();
  const guestChannels = useGuestChannels();
  const { cid } = useParams();
  const navigate = useNavigate();
  const elements = useRef<Record<string, HTMLDivElement>>({});

  useEffect(() => {
    scrollHandler(elements.current[cid!]);
  }, [cid, scrollHandler]);

  return (
    <div className={styles.list} ref={scrollContainerRef}>
      {guestChannels.map((channel) => (
        <div
          key={channel.id}
          className={classNames(styles.item, {
            [styles.active]: Number(channel.id) === Number(cid),
          })}
          onClick={(event) => {
            navigate(`/${channel.id}`);
          }}
          ref={(element) => (elements.current[channel.id] = element!)}
        >
          {channel.name}
        </div>
      ))}
    </div>
  );
}
